@import "../../style/public";
.business-analysis {
  line-height: 1.1;
  .disabled{
    color: #ccc !important;
  }
  .chart-width{
    .table{
      li{
        line-height: initial;
        >div{
          @include remCalc(padding,10,0);
          &:first-child{
            width:40%;
          }
        }
      }
    }
  }
  .arrow-down{
    &::before{
      transform: rotate(90deg);
      display: inline-block;
    }
  }
  .table {
    @include remCalc(font-size, 24);
    @include remCalc(margin, 0, 0, 0, 30);
    color: #333;
    > li {
      display: flex;
      @include thin-border(false, false, bottom);
      @include remCalc(height, 90);
      @include remCalc(line-height, 90);
      box-sizing: border-box;
      > div {
        box-sizing: border-box;
        word-break: break-all;
        display: flex;
        justify-content: center;
        flex-flow: column;
        &:first-child {
          @include remCalc(width, 200);
          & + div {
            @include remCalc(padding-right, 50);
            @extend %text-overflow;
            flex: 1;
            & + div {
              @include remCalc(width, 176);
              & + div {
                @include remCalc(width, 118);
              }
            }
          }
        }
      }
    }
  }
  .orderSource{
    @include remCalc(padding, 30,30,0,30);
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    .chart-wrap{
      flex:1;
      display: flex;
      flex-direction: column;
       margin-top: 0;
      .scroll-wrap{
        flex:1;
        overflow-y: auto;
      }
    }
  }
  .hide {
    display: none;
  }
  .chart-remark{
    @include remCalc(font-size, 24);
    color: #999;
    line-height: 1.5;
  }
  .tab-bar {
    display: flex;
    border: 1px solid $color-red;
    border-radius: 4px;
    overflow: hidden;
    @include remCalc(margin, 50, 0, 40, 0);
    li {
      flex: 1;
      text-align: center;
      @include remCalc(height, 80);
      @include remCalc(line-height, 80);
      @include remCalc(font-size, 30);
      color: $color-red;
      background: #fff;
      border-left: 1px solid $color-red;
      box-sizing: border-box;
      &:first-child{
        border-left:none;
      }

      &.selected {
        background: $color-red;
        color: #fff;
      }
    }
  }
  .section-title {
    box-sizing: border-box;
    @include remCalc(height, 90);
    @include remCalc(line-height, 90);
    @include thin-border(false, false, bottom);
    @include remCalc(font-size, 30);
    @include remCalc(margin-left, 30);
    @include remCalc(padding-right, 30);
    color: #666;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .section-container {
    @include remCalc(padding,0, 30);
  }
  .filter {
  //@include remCalc(margin-top, 20);
    @include remCalc(font-size, 32);
    //color: #333;
    color: $color-red;
    display: flex;
    @include remCalc(margin-bottom, 20);
    @include thin-border(false, false, bottom, #e5e5e5);
    > li {
      flex: 1;
      text-align: center;
      background: #fff;
      @include remCalc(height, 90);
      @include remCalc(line-height, 90);
      box-sizing: border-box;
      &.ope{
        color:$color-red;
      }
      &.date{
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
       &.custom{
         >div{
           width:100%;
         }
       }
        >div{
          height:auto;
          line-height: initial;
          @include remCalc(width, 280);
        }
      }
    }
  }
  %section {
    @include remCalc(margin-bottom, 20);
    @include thin-border(true, false);
    background: #fff;
  }
  .chart-wrap{
    @include remCalc(margin-top, 30);
  }
  .trade-summary {
    @extend %section;
    .ts-content {
      @include remCalc(padding, 0, 30, 60, 30);
      .top {
        text-align: center;
        .total-get {
          span {
            display: block;
            @include remCalc(font-size, 28);
            @include remCalc(padding, 50, 0, 40, 0);
            color: #999;
          }
          div {
            @include remCalc(font-size, 70);
            color: #ff801a;
          }
        }
        .discount {
          @include remCalc(padding, 30, 0, 50, 0);
          @include remCalc(font-size, 26);
          color: #666;
        }
      }
      .bottom {
        display: flex;
        > li {
          @include remCalc(padding-left, 70);
          flex: 1;
          position: relative;
          &:first-child {
            @include remCalc(padding-left, 30);
            &::before {
              position: absolute;
              content: "";
              right: 0;
              top: 50%;
              transform: translateY(-50%);
              @include remCalc(height, 90);
              width: 1px;
              background: #999;
            }
          }
          .money {
            span {
              @include remCalc(font-size, 26);
              color: #7e7e7e;
            }
            div {
              @include remCalc(padding, 28, 0, 16, 0);
              @include remCalc(font-size, 50);
              color: #000;
            }
          }
          .amount {
            @include remCalc(font-size, 26);
            color: #666;
          }
        }
      }
    }
  }
  .get-way {
    @extend %section;
    @include remCalc(padding, 50, 30,40,30);
  }
  .zhk-statistics {
    @extend %section;
    @include remCalc(padding-bottom, 30);
    .swipe-wrap {
      @include remCalc(padding, 0, 30, 20, 30);
      @include remCalc(height, 556);
      .type {
        @include remCalc(font-size, 30);
        color: #333;
        @include remCalc(padding, 20, 30, 10, 20);
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .swipe-item {
        @include remCalc(height, 442);
        box-shadow: 0 5px 5px #f3f3f3;
        @include remCalc(margin, 50, 0, 40, 0);
        background: #fcfcfc;
        border-radius: 8px;
        border: 1px solid #e3e3e3;
        .ts-content {
          .top {
            text-align: center;
            .total-get {
              span {
                display: block;
                @include remCalc(font-size, 28);
                @include remCalc(padding, 0, 0, 20, 0);
                color: #999;
              }
              div {
                @include remCalc(font-size, 54);
                color: $color-red;
              }
            }
            .discount {
              @include remCalc(padding, 20, 0, 50, 0);
              @include remCalc(font-size, 26);
              color: #666;
            }
          }
          .bottom {
            display: flex;
            > li {
             // @include remCalc(padding-left, 46);
              flex: 1;
              position: relative;
              &:first-child {
               // @include remCalc(padding-left, 58);
                &::before {
                  position: absolute;
                  content: "";
                  right: 0;
                  top: 50%;
                  transform: translateY(-50%);
                  @include remCalc(height, 90);
                  width: 1px;
                  background: #999;
                }
              }
              .money {
                text-align: center;
                span {
                  @include remCalc(font-size, 26);
                  color: #7e7e7e;
                }
                div {
                  @include remCalc(padding, 20, 0, 16, 0);
                  @include remCalc(font-size, 40);
                  color: #000;
                }
              }
              .amount {
                text-align: center;
                @include remCalc(font-size, 26);
                color: #666;
              }
            }
          }
        }
      }
    }
    .tip{
      @include remCalc(font-size, 22);
      @include remCalc(padding, 20,0,0,0);
      color:  #7e7e7e;
      text-align: center;
    }
  }
  .effect-statistics {
    @extend %section;
    @include remCalc(padding, 0, 30, 20, 30);
  }
  .store{
    @extend %section;
  }
  .all-store{
    background: #fff;
    @include remCalc(font-size, 30);
    color: #333;
    @include remCalc(height, 90);
    @include remCalc(line-height, 90);
    @include remCalc(padding,0, 30);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    i{
      color:#c9c9cd;
    }
  }
  .all-source{
    @extend .all-store;
    padding:0;
    @include remCalc(margin, 0,0,-40,0);
  }
}
